<template>
  <div class="container">
    <uv-navbar bgColor="transparent">
      <template v-slot:left>
        <view class="nav flex justifyBetween alignCenter">
          <view class="tabs flex">
            <view class="tab" @click="tabsClick(index)" :style="tabStyle(index)" v-for="(item,index) in tabs" :key="index">{{item.name}}</view>
          </view>
        </view>
      </template>
      <template v-slot:right>
        <view class="map" :style="iconStyle()">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/08/17283509915568554.png" width="16px" height="16px"></uv-image>
        </view>
      </template>
    </uv-navbar>

    <z-swiper v-model="items" :options="swiperOptions" ref="swiperRef" v-if="current == 0">
      <z-swiper-item v-for="(item,index) in items" :key="index">
        <!-- <userInfo :info="item" @next="next" :navHeight="navHeight"></userInfo> -->
        <userData :info="item" @next="next" :navHeight="navHeight"></userData>
      </z-swiper-item>
    </z-swiper>

    <offlineContact v-else :navHeight="navHeight" ref="offlineContactRef"></offlineContact>

    <todaySignIn></todaySignIn>
  </div>
</template>

<script setup lang="ts">
//签到弹框
import todaySignIn from "@/components/main/todaySignIn.vue";

import offlineContact from "@/pages/tabbar/tabbar-1/components/offlineContact.vue";
import userData from "@/pages/tabbar/tabbar-1/components/userData.vue";
import userInfo from "@/pages/tabbar/tabbar-1/components/userInfo.vue";
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();

let info = ref({});
let current = ref(0);
let swiperCurrent = ref(0);
let items = ref([]);
let navHeight = ref(0);
let isFollow = ref(false);

let tabs = computed(() => {
  return [{ name: "推荐" }, { name: "线下" }];
});

let swiperOptions = computed(() => {
  return {
    loop: false,
    noSwiping: true,
    height: counter.windowHeight,
  };
});

onShow(() => {
  uni.setTabBarStyle({ borderStyle: "white" });
  getInfo();
  setCss();
});

onReachBottom(() => {
  if (current.value == 1) instance.refs.offlineContactRef.getMore();
});

function iconStyle() {
  let right = 0;
  // #ifdef MP-WEIXIN
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  right = menuButtonInfo.width;
  // #endif
  return {
    paddingRight: `${right}px`,
  };
}

function tabStyle(e) {
  let obj = {};
  if (current.value == 0 && e == current.value) {
    obj = {
      background: "#b1b1b2",
      border: "1px solid #fff",
    };
  } else if (current.value == 1 && e == current.value) {
    obj = {
      background: "#FFFFFF",
      border: "1px solid #fff",
      color: "#F37398",
      boxShadow: "2px 5px 5px 2px #F7F7F3",
    };
  } else if (current.value == 0) {
    obj = {
      background: "#7f7f7f",
      color: "white",
      border: "1px solid transparent",
    };
  } else {
    obj = {
      background: "transparent",
      color: "#808080",
      border: "1px solid #FFFFFF",
    };
  }
  return obj;
}

function setCss() {
  nextTick(async () => {
    navHeight.value = await viewInfo("#navbarId", "height");
  });
}

function next() {
  swiperCurrent.value++;
  info.value = items.value[swiperCurrent.value];
  instance.refs.swiperRef.swiper.slideNext();
  setTimeout(async () => {
    items.value.push(await name());
  }, 1000);
}

async function getInfo() {
  items.value = [];
  for (let index = 0; index < 2; index++) {
    items.value.push(await name());
  }
  info.value = items.value[0];
}

async function name() {
  return await proxy.$apis.recommendFriend();
}

function tabsClick(e) {
  if (e == 0) {
  } else {
    counter.getPosition();
  }
  current.value = e;
}

//获取页面元素信息
function viewInfo(id, type) {
  return new Promise((resolve, reject) => {
    uni
      .createSelectorQuery()
      .in(instance)
      .select(id)
      .boundingClientRect((data) => {
        if (data) {
          resolve(data[type]);
        } else {
          resolve(0);
        }
      })
      .exec();
  });
}
</script>


<style lang="scss">
page {
  background: linear-gradient(to right, #fef7ed, #fbfbfb);
}
</style>
<style lang="scss" scoped>
.container {
  position: relative;
  .swiper-item {
    height: 100%;
    overflow-y: auto;
  }
  .nav {
    .tabs {
      .tab {
        width: 100px;
        height: 40px;
        line-height: 40px;
        border-radius: 50px;
        text-align: center;
        margin-right: 15px;
      }
    }
  }
  .next {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 10;
    /* #ifdef H5*/
    bottom: 18vw;
    /* #endif */

    /* #ifdef MP-WEIXIN*/
    bottom: 10vw;
    /* #endif */

    width: 80%;
    margin: auto;
    .close {
      background-color: #b9b8c7;
    }
    .love {
      background-color: #fe8aa7;
    }
    .icon {
      border-radius: 50%;
      width: 45px;
      height: 45px;
      position: relative;
    }
    .know {
      color: white;
      background: linear-gradient(to bottom, #7f7efe, #9a97ff);
      height: 45px;
      line-height: 45px;
      padding: 0 30px;
      border-radius: 30px;
      margin: 0 15px;
    }
  }
}
</style>



